<template>
	<!-- :style="{backgroundImage:'url('+$ftpUrl('/counpond_bg.png')+')'}" -->
	<view class="" >
		<view>
			<image :src="$ftpUrl('/counpond_bg.png')" style="height: 540rpx;width: 750rpx;"  mode="widthFix"></image>
		</view>
		
		
		<view class="bg">
			<view v-for="(item,index) in list " :key="index"
				:class="item.status==0?'base-coupons_gray':item.status==1?'base-coupons':item.status==2?'base-coupons change':''"
				class="vouch shadow u-flex"  @click="lingqu(item)">
				<view  class="u-flex-3.8 u-text-center" style="color: #fff;">
					<view >
						<text>￥</text>
						<text style="font-size: 40rpx;">{{item.money}}</text>
					</view>
					<view class="">
					   满{{item.needMoney}}使用
					</view>
				</view>
				<view class="u-flex-5" style="padding-left: 60rpx;">
					<view style="font-weight: bold;font-size: 34rpx;">{{item.couponName}}</view>
					<view style="color: #bebebe;margin: 20rpx 0;">说明:{{item.remark}}</view>
					<view class="u-text-right" >
						<u-button type="error" size="mini" @click="lingqu(item)" shape="circle">领取</u-button>
					</view>
					<!-- <view style="color: #bebebe;"> 期限:{{item.price}}</view> -->
				</view>
			</view>
		</view>
		
		
		<view class="bottomFix">
			<u-button type="primary" shape="circle" @click="goMyVouch">我的优惠券</u-button>
		</view>
		
	
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import loader from '@/common/loadPage.js';
	export default {
				mixins: [loader],
		data() {
	
			return {
			
				list: [],
				initial: {
					geturl: "/index/coupon",
					parm: {
					 
					},
					isPage: true
				},
			}
		},
		onLoad() {
			this.getGoods()
		},
		onShow() {

		},
		methods: {
				lingqu(item){
					this.$u.post('/user/getCoupon', {
						coupon_id: item.id,
					
					}, {}).then(res => {
					  this.$refs.uToast.show({
					  	title: '领取成功',
					  	type: 'success',
					  	
					  })
					}).catch(err => {
					
					})
					
					
				},
				goMyVouch(){
					uni.navigateTo({
						url:'/else/MyVouch/index'
					})
				}
		}
	}
</script>

<style>
	page {
		
		height: 100vh;
		width: 100%;
		background: linear-gradient(to top, #FF321A,#FF7133);

	}
	.bg{
		width: 700rpx;
		margin: auto;
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		position: relative;
		bottom: 200rpx;
	}

	.base-coupons {
		width: 620rpx;
		height: 200rpx;

		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #FF5D39 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #FF5D39 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,

			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		/* filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3)); */
		margin: auto;
	}

	.change {
		opacity: 0.4;
	}


	.base-coupons::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #FF5D39 10rpx, transparent 10rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #FF5D39 0rpx);
		background-size: 10rpx 30rpx;
	}

	.base-coupons_gray {
		width: 620rpx;
		height: 200rpx;

		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #C8C8C8 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #C8C8C8 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,

			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3));
		margin: auto;
	}


	.base-coupons_gray::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #C8C8C8 10rpx, transparent 0rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #C8C8C8 0rpx);
		background-size: 10rpx 30rpx;
	}


	.vouch {
		margin-top: 20rpx;
		
	}
</style>
